<template>
    <el-dialog
        v-model="dialogVisible"
        title="详情"
        width="35%"
    >
        <div class="configDetailContent">
            <el-form
                label-width="130px"
                class="demo-ruleForm"
                status-icon
            >

                <el-row class="row" :gutter="10">
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="配置ID">
                            <el-input v-model="historyDetailData.data.configId" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="版本号">
                            <el-input v-model="historyDetailData.data.version" disabled/>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row class="row" :gutter="10">
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="当前配置方案">
                            <el-input v-model="historyDetailData.data.configInfoId" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="当前配置类型">
                            <el-input v-if="historyDetailData.data.configInfoType===0" model-value="策略" disabled/>
                            <el-input v-if="historyDetailData.data.configInfoType===1" model-value="策略组" disabled/>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row class="row" :gutter="10">
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="采集时长前">
                            <el-input v-model="historyDetailData.data.collectTimeBefore" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="采集时长后">
                            <el-input v-model="historyDetailData.data.collectTimeAfter" disabled/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="row" :gutter="10">
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="触发频次周期">
                            <el-input v-model="historyDetailData.data.cycle" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="触发频次采集次数">
                            <el-input v-model="historyDetailData.data.triggerCount" disabled/>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row class="row" :gutter="20">
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="量产车数量">
                            <el-input v-model="historyDetailData.data.productionCarNumber" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="研发车数量">
                            <el-input v-model="historyDetailData.data.developCarNumber" disabled/>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row class="row" :gutter="20">
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="变更车型">
                            <el-input v-model="vehicleTypes" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="display: flex">
                        <el-form-item label="配置描述信息" style="">
                            <textarea style="width: 100%;min-height: 50px;border-color: #DCDFE6!important;"
                                      v-model="historyDetailData.data.configStrategyInfos" disabled></textarea>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </div>
        <template #footer>
          <span class="dialog-footer">
<!--            <el-button @click="dialogVisible = false">取消</el-button>-->
            <el-button type="primary" @click="confirmFn">确认</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script>

import {reactive, ref} from 'vue'
import {editCarBorrowDetailApi} from "@/api/vehicleAccountApi/vehicleAccountApi.js";
import {ElMessage} from "element-plus";
import {getHistoryConfigDetailApi} from "@/api/carManage/policyManage";


export default {
    setup(props, {
        attrs,
        slots,
        emit
    }) {
        const dialogVisible = ref(false)

        let vehicleTypes = ref(null)
        let historyDetailData = reactive({
            data: {
            }
        })


        const switchVisible = (rowData) => {
            dialogVisible.value = true;
            getHistoryConfigDetailFn(rowData.id)
        }

        const getHistoryConfigDetailFn = (id) => {

            getHistoryConfigDetailApi({
                id: id
            }).then(res => {
                if (res.data.code === 200) {
                    historyDetailData.data = res.data.data;

                    if (historyDetailData.data.cycle === 'day') {
                        historyDetailData.data.cycle = '天'
                    } else if (historyDetailData.data.cycle === 'month') {
                        historyDetailData.data.cycle = '月'
                    }


                    if (historyDetailData.data.configInfoType === 0) {
                        historyDetailData.data.configInfoId = 'T' + historyDetailData.data.configInfoId
                    } else if (historyDetailData.data.configInfoType === 1) {
                        historyDetailData.data.configInfoId = 'TG' + historyDetailData.data.configInfoId
                    }
                    vehicleTypes.value = historyDetailData.data.vehicleTypes ? historyDetailData.data.vehicleTypes[0] : 1
                }
            })


        }


        const confirmFn = () => {
            dialogVisible.value = false;
        }

        return {
            switchVisible,
            dialogVisible,
            historyDetailData,
            confirmFn,
            vehicleTypes

        }
    }

}


</script>

<style lang="less">
.configDetailContent {
    padding: 10px;
    .row {
        margin-bottom: 10px;
        input{
            width: 100%;
        }
    }
    .el-form-item{
        width: 100%;
    }
}

</style>